<template>
    <div class="actionSheet" @click="hideMe">
        <ul class="actionList" ref="actionListDOM">
            <li @click="itemClick(index)" v-for="(item,index) in actionItemList" :key="index">{{item}}</li>
            <li>取消</li>
        </ul>
    </div>    
</template>
<script>
import {mapGetters,mapActions,mapState} from "vuex"
// 一般情况下，我们不会直接拿mapState,都是通过mapGetter来getter 
export default {
    name:"ActionSheet",
    computed:{
        ...mapGetters(["actionItemList"]),
        ...mapState(["actionSheetConfig"])
    },
    methods:{
        ...mapActions(["hideActionSheet"]),
        hideMe(){
            this.$refs.actionListDOM.classList.remove("active");
            setTimeout(()=>{
                this.hideActionSheet();
            },300)
        },
        //当某一项被点击以后
        itemClick(index){
            if(typeof this.actionSheetConfig.successCallBack=="function"){
                //说明这个属性有回调方法
                this.actionSheetConfig.successCallBack(index);
            }
        }
    },
    //create和mounted都是组件的生命周期，都是组件创建的时候用的
    mounted(){
        setTimeout(()=>{
            this.$refs.actionListDOM.classList.add("active");
        });
    }
}
</script>
<style lang="scss" scoped>
.actionSheet{
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    .actionList{
        background-color: lightgray;
        margin: 0;
        padding: 0;
        list-style-type: none;
        position: absolute;
        width: 100%;
        bottom: 0px;
        left: 0px;
        box-sizing: border-box;
        padding: .04rem;
        transform: translateY(100%);
        transition: transform 0.3s linear;
        &.active{
            transform: translateY(0);
        }
        >li{
            background-color: white;
            height: .8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #ececec;
            &:last-child{
                margin-top: .1rem;
            }
        }
    }
}
</style>